<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <title>oh my echarts</title>
    <script src="js/echarts.js"></script>
  </head>

  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 1000px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        var xDataArr = ['长津湖', '战狼2', '你好，李焕英', '哪吒之魔童降世', '流浪地球', '唐人街探案3', '复仇者联盟4：终局之战', '红海行动', '唐人街探案2', '美人鱼'];
        var yDataArr = [57.75, 56.94, 54.13, 50.35, 46.86, 45.23, 42.50, 36.51, 33.97, 33.92];

  
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: '中国影史票房（过时版）',
            textStyle: {
              color: 'blue'
            }
          },
          
          xAxis: {
            type: 'category',
            data: xDataArr,
            axisLabel: {
              interval: 0, // 强制显示所有标签
              
            }
          },
          
          yAxis: {
            type: 'value'
          },
          series:{
            type: 'bar',
            data: yDataArr,
            barWidth: '30%',
            label: {show: true, rotate: 60},
            
            markPoint: {
              data: [{type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}]
            },
            markLine: {
              data: [{type: 'average', name: '平均值'}]
            }
          }
        };
  
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      </script>
  </body>
</html>